
<template>
  <div id="address" :class='{"isiphone":$isiphone}'>
    <ul>
      <li v-for="(item, index) in addressList" :key="index">
        <div class="one" @click="JumpBj(item)">
          <span class="name">{{item.name}}</span>
          <span class="phone">{{item.phone}}</span>
          <span class="address">{{item.title}}</span>
        </div>
        <div class="two">
          <x-switch title='设为默认' v-model="item.isDefault"
          @on-change='switchChange(item,index)'></x-switch>
          <img src="../../../wechat/static/images/qrdd_sc.png" @click="delectI(item,index)" alt>
          <img src="../../../wechat/static/images/qrdd_bj.png" @click="JumpBj(item)" alt>
        </div>
      </li>
      <load-more :show-loading="false" tip="暂无更多数据" v-show="isloading" background-color="#fbf9fe"></load-more>
    </ul>
    <div class="four">
      <a href="javascript:;" @click="add">新增收货地址</a>
    </div>
  </div>
</template>

<script>
import { XSwitch,LoadMore } from "vux";
export default {
  name: "address",
  data() {
    return {
      addressList: [
       
      ],
      isloading: false,
      isDefault: "", //是否为默认地址
      pageIndex: 1, //第几页
      pageSize: 1000, //每页大小
      userId: localStorage.getItem('userId')||'' ,//所属用户id
    };
  },
  mounted() {
    this.addressList = []
    this.getList()
  },
  created() {},
  methods: {
    add () {
      this.$router.push('./addressEdit')
    },
    delectI(v, i) {
      var that = this
      this.$vux.confirm.show({
        title: '提示',
        content: '是否删除',
        onShow () {
          console.log('plugin show')
        },
        onHide () {
          console.log('plugin hide')
        },
        onCancel () {
          console.log('plugin cancel')
        },
        onConfirm () {
          console.log('plugin confirm')
          let url =
            that.$CONSTANT.ADDRESS.deleteEsUserAddress +
            "?sessionId=" +
            that.$common.getCookie("sessionId");
          let param = {
            id: v.id
          };
          that.$vux.loading.show({
            text: 'Loading'
          })
          setTimeout(() => {
            that.$common.post(url, param, res => {
              that.$vux.loading.hide()
              if (res.status == 200) {
                var bussData = res.data.bussData;
                setTimeout(() => {
                  that.addressList.splice(i,1)
                  if(that.addressList.length ==0 ){
                    localStorage.setItem('orderConName','')
                    localStorage.setItem('orderConPhone','')
                    localStorage.setItem('orderConAddress','')
                    localStorage.setItem('provinceCode','')
                    localStorage.setItem('cityCode','')
                    localStorage.setItem('districtCode','')
                  }
                }, 1000);
                that.$vux.toast.show({
                  text: res.msg,
                  type: ""
                });
              } else {
                this.$vux.toast.show({
                  text: res.msg,
                  type: "warn",
              width: 'auto'
                });
              }
            });
          }, 1000);
        }
      })
    },
    switchChange(item, index) {
      console.log(item,index)
      this.setDefault(item)
    },
    setDefault(item){
      let url =
        this.$CONSTANT.ADDRESS.saveEsUserAddress +
        "?sessionId=" +
        this.$common.getCookie("sessionId");
      let param = {
        address: item.title,
        id: item.id,
        isDefault: item.isDefault?'y':'n',
        mobile: item.phone,
        recieveName: item.name,
        userId: localStorage.getItem("userId")||''
      };
      // this.$vux.loading.show({
      //   text: 'Loading'
      // })
      setTimeout(() => {
        this.$common.post(url, param, res => {
          this.$vux.loading.hide()
          if (res.status == 200) {
            var bussData = res.data.bussData;
            this.$vux.toast.show({
              text: res.msg,
              type: "",
              width: 'auto'
            });
            setTimeout(() => {
              this.getList()
            }, 1100);
          } else {
            this.$vux.toast.show({
              text: res.msg,
              type: "warn",
              width: 'auto'
            });
          }
        });
      }, 500);
    },
    getList() {
      let url =
        this.$CONSTANT.ADDRESS.findEsUserAddressByPage +
        "?sessionId=" +
        this.$common.getCookie("sessionId");
      let param = {
        isDefault: this.isDefault,
        pageIndex: this.pageIndex,
        pageSize: this.pageSize,
        userId: this.userId,
      };
      this.addressList = []
      this.$vux.loading.show({
        text: 'Loading'
      })
      this.isloading = false
      this.$common.post(url, param, res => {
        this.isloading = true
        setTimeout(() => {
          this.$vux.loading.hide()
        }, 800);
        if (res.status == 200) {
          var bussData = res.data.bussData;
          if(bussData.length ==0 ){
            localStorage.setItem('orderConName','')
            localStorage.setItem('orderConPhone','')
            localStorage.setItem('orderConAddress','')
          }
          bussData.forEach(element => {
            this.addressList.push({
              id:element.id,
              name: element.recieveName,
              phone: element.mobile,
              title: element.address,
              isDefault: element.isDefault=='y'?true:false,
              isActive: false
            })
          });
        } else {
          this.$vux.toast.show({
              text: res.msg,
              type: "warn",
              width: 'auto'
            });
        }
      });
    },
    JumpBj(v) {
      this.$router.push({
        path: "/addressEdit?id="+v.id
      });
    }
  },
  components: {
    XSwitch,
    LoadMore
  }
};
</script>

<style lang="less">
#address {
  // padding-bottom: 80px;
  ul {
    li {
      background: #fff;
      position: relative;
      margin-bottom: 8px;
      img.radio {
        width: 16px;
        height: 16px;
        vertical-align: middle;
        float: left;
        position: absolute;
        top: 34px;
        left: 11px;
      }
      .one {
        padding: 20px 39px 20px 28px;
        border-bottom: 1px solid #e1e1e1;
        span.name {
          font-family: PingFang-SC-Bold;font-weight: 600;
          font-size: 15px;
          color: #333;
        }
        .address {
          display: block;
          font-family: PingFang-SC-Medium;
          font-size: 13px;
          color: #333;
          margin-top: 0px;
        }
        .phone {
          font-family: PingFang-SC-Bold;font-weight: 600;
          font-size: 15px;
          color: #333;
          margin-left: 11px;
        }
      }
      .two {
        height: 42px;
        line-height: 42px;
        padding-right: 10px;
        .vux-x-switch {
          display: inline-block;
          padding-top: 0;
          .weui-cell__bd {
            display: inline-block;
            font-family: PingFang-SC-Medium;
            font-size: 10px;
            color: #999;
            margin-left: 11px;
            .weui-label {
              width: 4.2em;
            }
          }
          .weui-cell__ft {
            display: inline-block;
            position: relative;
            top: 5px;
            .weui-switch {
              width: 27px;
              height: 17px;
              padding-top: 0px;
              padding-right: 0px;
              padding-bottom: 0px;
              padding-left: 0px;
              &:before {
                width: 27px;
                height: 17px;
              }
              &:after {
                width: 16px;
                height: 15px;
              }
              &:checked:after {
                -webkit-transform: translateX(10px);
                transform: translateX(10px);
              }
            }
          }
        }
        img {
          width: 15px;
          height: 15px;
          float: right;
          margin-left: 14px;
          margin-top: 13px;
        }
      }
    }
    .noData{
      text-align: center;
      color: #999;
      font-family: PingFang-SC-Medium;
    }
  }
  .four {
      position: fixed;
      width: 100%;
      bottom: 10px;
      text-align: center;
      a {
        display: inline-block;
        height: 45px;
        width: 61%;
        text-align: center;
        line-height: 45px;
        background: #ee3c4a;
        color: #fff;
        font-size: 15px;
        font-family: PingFang-SC-Bold;font-weight: 600;
        border: 1px solid transparent;
        border-radius: 23px;
      }
    }
}
</style>
